<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>icf</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/public/layui/admin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/public/layui/admin/style/admin.css" media="all">
	<style>
		.layui-card-header {
			/*position: relative;*/
			height: 52px;
			/*line-height: 42px;*/
			/*padding: 0 15px;*/
			color: #333;
			border-radius: 2px 2px 0 0;
			border-bottom: none;
			font-size: 14px;
		}

		.layui-form-label {
			float: left;
			display: block;
			font-weight: 400;
			line-height: 20px;
			padding: 9px 10px;
			text-align: left;
			width: auto;
		}

		.layui-input,
		.layui-select,
		.layui-textarea {
			height: 30px;
			/*margin-top: 5px;*/
		}

		.layui-table-cell {
			height: auto;
			line-height: 20px;
		}
	</style>
</head>
<body>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-form layui-card-header">
					<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" id="keyword" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-sm" lay-submit lay-filter="list-search">搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-body">
					<!-- 表格 -->
					<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
					<!-- 嗮选表单字段 -->
					<script type="text/html" id="data-table-filter">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
						</div>
					</script>
					<!-- 操作工具栏 -->
					<script type="text/html" id="data-table-toolbar">
						<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="/public/layui/admin/layui/layui.js"></script>
<script>
	layui.config({
		base: '/public/layui/admin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index','table','jquery'], function(){
		var $ = layui.$;
		var table = layui.table;
		table.render({
			elem: '#data-table'
			,url: '/admin/{{.StructName}}/listjson_saas'  + '?appid={{.L2Brace}}data.Who.MiniAppId{{.R2Brace}}&tid={{.L2Brace}}data.Who.TenantId{{.R2Brace}}'
			,where : {"keyword":""}
			,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,toolbar: '#data-table-filter'
			,cols: [[
				//#TableJsonFields#
				{{range .FieldList}} {field:'{{.FieldNameSnaked}}',title: '{{.FieldNameSnaked}}', hide: {{if .IsShowTitle}}false{{else}}true{{end}}},
				{{end}}
				{fixed: 'right', title:'操作', toolbar: '#data-table-toolbar', width:120}
			]]
			,page: true
		});

		//头工具栏事件
		table.on('toolbar(data-table)', function(obj){
			switch(obj.event){
				case 'add':{
					var url = "/admin/{{.StructName}}/editpage_saas" + '?appid={{.L2Brace}}data.Who.MiniAppId{{.R2Brace}}&tid={{.L2Brace}}data.Who.TenantId{{.R2Brace}}';
					parent.layer.open({
						type: 2,
						anim: -1,
						area: ['700px','600px'],
						offset: '16px',
						content: url,
						end: function () {
							window.location.reload();
						}
					});
				}
					break;
			};
		});

		//监听行工具事件
		table.on('tool(data-table)', function(obj){
			var data = obj.data;
			console.log('table on click');
			if(obj.event === 'del'){
				parent.layer.confirm('真的删除行么', function(index){
					$.ajax({
						type: "POST",
						url : "/admin/{{.StructName}}/del",
						data: {"id":data.id},
						async: true,
						error: function(request) {
							alert("删除失败");
						},
						success: function(response) {
							var rt = response
							if(rt.code == 0){
								obj.del();
								parent.layer.close(index);
							}else{
								parent.layer.alert(rt.msg, {title: '删除失败'});
							}
						}
					});
				});
			} else if(obj.event === 'edit'){
				var url ="/admin/{{.StructName}}/editpage_saas?id=" + data.id  + '&appid={{.L2Brace}}data.Who.MiniAppId{{.R2Brace}}&tid={{.L2Brace}}data.Who.TenantId{{.R2Brace}}';
				parent.layer.open({
					type: 2,
					anim: -1,
					area: ['700px','600px'],
					offset: '16px',
					content: url,
					end: function () {
						refresh()
						//window.location.reload();
					}
				});
			}
		});

		// 嗮选字段 监听搜索
		form = layui.form;
		form.on('submit(list-search)', function(data){
			refresh()
			/*var field = data.field;
			//执行重载
			table.reload('data-table', {
				where: field
			});*/
		});

		function refresh() {
			var searchKey = $("#keyword").val();
			table.reload('data-table', {
				where: {"keyword":searchKey}
			});
		}

		//监听list整体排序
		table.on('sort(data-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			//console.log(obj.field); //当前排序的字段名
			//console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
			//console.log(this); //当前排序的 th 对象

			//尽管我们的 table 自带排序功能，但并没有请求服务端。
			//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
			table.reload('data-table', {
				initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
				,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
					order_field: obj.field //排序字段   在接口作为参数字段  field order
					,order: obj.type //排序方式   在接口作为参数字段  field order
				}
			});
		});

	});
</script>
</body>
</html>